<template>
  <div class="container">
    <!-- Navigation SmaintainIdebar -->
    <!-- <el-asmaintainIde wmaintainIdth="200px">
      <el-menu
        default-active="repairRecords"
        style="height: 100%"
        @select="handleSelect"
      >
        <el-menu-item index="uploadLog">上传日志</el-menu-item>
      </el-menu>
    </el-asmaintainIde> -->

    <!-- Main Content Area -->
    <el-main>
      <!-- Upload Log Form -->
      <div v-if="selected === 'uploadLog'" class="center-container">
        <el-form ref="logForm" :rules="rules" :model="logForm" label-wmaintain-idth="120px">
          <el-form-item label="姓名" prop="maintainer">
            <el-input v-model="logForm.maintainer" />
          </el-form-item>
          <el-form-item label="学号/工号" prop="maintainId">
            <el-input v-model="logForm.maintainId" />
          </el-form-item>
          <el-form-item label="联系方式" prop="contact">
            <el-input v-model="logForm.contact" />
          </el-form-item>
          <el-form-item label="所属部门/学院" prop="department">
            <el-select v-model="logForm.department" placeholder="请选择您所在的学院">
              <el-option label="计算机科学与工程学院/软件学院" value="SCSE" />
              <el-option label="文学院/新闻与传播学院" value="SJC" />
              <el-option label="马克思主义学院" value="MA" />
              <el-option label="政治与公共管理学院" value="FPCPA" />
              <el-option label="教育学部/教师教育学院（田家炳教育书院）" value="DE" />
              <el-option label="美术学院" value="ADC" />
              <el-option label="数学与统计学院" value="SMS" />
              <el-option label="化学与药学学院" value="FCP" />
              <el-option label="环境与资源学院" value="SER" />
              <el-option label="体育与健康学院" value="FPEH" />
              <el-option label="职业技术师范学院" value="VTTTC" />
              <el-option label="国际文化教育学院" value="IICE" />
              <el-option label="历史文化与旅游学院" value="FHCT" />
              <el-option label="法学院/律师学院" value="LS" />
              <el-option label="经济管理学院" value="FEM" />
              <el-option label="外国语学院" value="FLC" />
              <el-option label="音乐学院" value="MA" />
              <el-option label="物理科学与技术学院" value="SPST" />
              <el-option label="生命科学学院" value="SLS" />
              <el-option label="电子与信息工程学院/集成电路学院" value="FEIE" />
              <el-option label="设计学院" value="SD" />
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称" prop="maintainDevice">
            <el-input v-model="logForm.maintainDevice" />
          </el-form-item>
          <el-form-item label="设备位置" prop="maintainPlace">
            <el-input v-model="logForm.maintainPlace" />
          </el-form-item>
          <el-form-item label="故障描述" prop="troubleDescribe">
            <el-input v-model="logForm.troubleDescribe" />
          </el-form-item>
          <el-form-item label="发现故障时间" prop="maintainTime">
            <el-date-picker v-model="logForm.maintainTime" type="datetime" />
          </el-form-item>
          <el-form-item label="故障发生前操作" prop="issueDescription">
            <el-input v-model="logForm.issueDescription" />
          </el-form-item>
          <el-form-item label="故障类型" prop="issueType">
            <el-checkbox-group v-model="logForm.issueType">
              <el-checkbox label="软件问题" />
              <el-checkbox label="网络连接问题" />
              <el-checkbox label="电源问题" />
              <el-checkbox label="其他" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(logForm)">提交</el-button>
            <el-button @click="resetForm('logForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-main>
  </div>
</template>

<script>
import { AddMaintenance } from '@/api/maintenance'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        已完成: 'success',
        待处理: 'danger',
        处理中: 'warning'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      selected: 'uploadLog', // Initially selected option
      logForm: {
        maintainer: '',
        maintainId: '',
        contact: '',
        department: '',
        maintainDevice: '',
        maintainPlace: '',
        issueDescription: '',
        maintainTime: '',
        troubleDescribe: '',
        issueType: []
      },
      rules: {
        maintainer: [{ required: true, message: '请输入姓名', trigger: 'blur' },
          { pattern: /^[\u4E00-\u9FA5]+$/, message: '姓名必须为中文', trigger: 'blur' }],
        // maintainId: [{ required: true, message: '请输入学号/工号', trigger: 'blur' },
        //   { pattern: /^\d{12}$/, message: '学号/工号必须为12位数字', trigger: 'blur' }],
        // contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' },
        //   { pattern: /^\d{11}$/, message: '联系方式必须为11位数字', trigger: 'blur' }],
        // department: [{ required: true, message: '请选择所属部门/学院', trigger: 'change' }],
        maintainDevice: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
        maintainPlace: [{ required: true, message: '请输入设备位置', trigger: 'blur' }],
        troubleDescribe: [{ required: true, message: '请输入故障描述', trigger: 'blur' }],
        maintainTime: [{ required: true, message: '请选择发现故障时间', trigger: 'change' }],
        // issueDescription: [{ required: true, message: '请输入故障发生前操作', trigger: 'blur' }],
        // issueType: [{ required: true, type: 'array', min: 1, message: '请至少选择一个故障类型', trigger: 'change' }]
      },
      repairRecords: [ // Sample repair records, replace with actual data
        {
          receiveTime: '2024/3/14 19:08',
          startTime: '2024/3/14 19:15',
          endTime: '2024/3/14 19:38',
          repairPerson: '小明',
          message: '已经修复好215机房所有电脑visio安装问题'
        }
        // Add more records as needed
      ],
      listLoading: false,
      dialogVisible: false,
      dialogTitle: '',
      currentRecord: {
        maintainId: '',
        display_time: '',
        title: '',
        status: ''
      }
    }
  },
  methods: {
    submitForm(logForm) {
      this.$refs.logForm.validate(valid => {
        if (valid) {
          AddMaintenance({
            'maintainDevice': logForm.maintainDevice,
            'maintainPlace': logForm.maintainPlace,
            'maintainer': logForm.maintainer,
            'maintainTime': logForm.maintainTime,
            'troubleDescribe': logForm.troubleDescribe,
            'maintainState': '待处理'
          })
            .then(res => {
              this.$message({
                type: 'success',
                message: res.message
              })
            })
            .catch(error => {
              console.error(error)
            })
        } else {
          this.$message.error('表单填写有误，请检查并重新提交')
          return false
        }
      })
    },
    resetForm(logForm) {
      this.$refs[logForm].resetFields()
    },
    handleSelect(selected) {
      this.selected = selected
    },
    viewRecord(record) {
      this.dialogTitle = '查看维修记录'
      // Copy the data from the record to currentRecord
      console.log(record)
      this.currentRecord = { ...record }
      this.dialogVisible = true
    },
    editRecord(record) {
      this.dialogTitle = '编辑维修记录'
      this.currentRecord = { ...record } // Make a copy to avomaintainId modifying the original record directly
      this.dialogVisible = true
    },
    deleteRecord(record) {
      // Optionally, show a confirmation dialog
      this.$confirm('确认删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // Find the index of the record in the list
        const index = this.list.indexOf(record)
        if (index !== -1) {
          // Remove the record from the list
          this.list.splice(index, 1)
          this.$message({
            type: 'success',
            message: '记录删除成功'
          })
        } else {
          // Record not found in the list
          this.$message.error('找不到要删除的记录')
        }
      }).catch(() => {
        // User canceled deletion
        this.$message.info('已取消删除操作')
      })
    },
    saveChanges() {
      // Logic to save changes made in the dialog
      // You can send the updated record data to the server here
      // Then close the dialog
      this.dialogVisible = false
    }
  }
}
</script>

  <style scoped>
  .container {
    display: flex;
    height: 100vh; /* Full height */
  }

  .el-asmaintainIde {
    background-color: #f0f2f5;
  }

  .el-main {
    padding: 20px;
  }

  .el-divmaintainIder {
    margin: 20px 0;
  }

  .center-container {
  margin-left: 150px;
  margin-right: 150px;
  min-height: 800px; /* 设置最小高度，确保在小屏幕设备上也能看清楚 */
  padding: 20px; /* 添加一些内边距，使内容和容器边缘有一定的间隔 */
  background: radial-gradient(circle, #ffffff, #f0f0f0); /* 添加一个径向渐变背景，增加美观性 */
  border-radius: 10px; /* 为容器添加圆角效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加一个阴影效果，使容器更具立体感 */
  overflow: hmaintainIdden; /* 隐藏溢出的内容 */
}

  </style>
